<template>
  <div class="test">
    <div id="printBox">
      <div v-html="printInfo.content" style="padding:20px 0px;">

      </div>
    </div>
    <div class="btns">
      <!-- 按钮 -->
      <el-button type="success" @click="printBox" style="margin:0 auto;display:block;">打印</el-button>
    </div>
  </div>
</template>
<script>
import print from 'print-js'
//   import * as echarts from 'echarts'
export default {
  props: ['printInfo'],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    printBox() {
      //.paging{page-break-after: always;padding:20px 0px;} @page { size: auto;margin-top:0mm;margin-bottom:0mm;padding:1000mm 0mm;}
      setTimeout(function () {
        print({
          printable: 'printBox',
          type: 'html',
          style: `
            @page { size:auto;margin: 5mm 10mm;} 
            
        table{
            border: 1px solid #ddd;
            border-collapse:collapse;
        }
        td{
            border: 1px solid #ddd;
            height:40px;
            padding-left:5px;
        }`,
          scanStyles: false,
          targetStyles: ['*'],
          HonorMarginPadding: true,
        })
      }, 500)
    },

  },
}
</script>
  
<style lang="scss" scoped>
.test {
  margin: 15px;
}

::v-deep #printBox table {
  border: 1px solid #ddd;
  border-collapse: collapse;
}
::v-deep #printBox td {
  border: 1px solid #ddd;
  height: 40px;
  padding-left: 5px;
}
::v-deep #printBox img {
  max-width: 100%;
}
</style>
  
  